<script lang="ts" setup>
import menuService from '@/composable/menu';
</script>
<template>
  <div class="hidden md:block border-2 border-cyan-100" v-show="menuService.historyMenus.value.length">
    <div class="m-3 grid grid-flow-col gap-3 justify-start">
      <div
        v-for="menu of menuService.historyMenus.value"
        class="bg-white shadow-sm hover:text-white duration-300 hover:bg-blue-500 border py-2 px-3 rounded-md text-gray-600"
        :class="{ 'bg-blue-500 text-white': $route.name == menu.route }"
      >
        <router-link :to="{ name: menu.route }"> {{ menu.title }}</router-link>
        <i
          class="fas fa-rectangle-xmark ml-1 hover:cursor-pointer hover:text-red-600"
          @click="menuService.removeHistory(menu)"
        ></i>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped></style>
